<!-- 关注 粉丝列表 -->
<template>
	<view class="my-index-view">
		<view class="top-search">
			<view class="fenlei flex-jc-ac">
				<view @click="indexs = 'follow'">
					<text class="listbox mr80" :class="{ redbottom: indexs === 'follow' }">关注</text>
					<text class="text">{{info.user_info.follow_count_text || 0}}</text>
				</view>
				<view class="ml120" @click="indexs = 'fans'">
					<text class="listbox" :class="{ redbottom: indexs === 'fans' }">粉丝</text>
					<text class="text">{{info.user_info.fans_count_text || 0}}</text>
				</view>
			</view>
			<view class="inputs">
				<view class="icons"></view>
				<input type="text" @input="handleInputChange" v-model="value" maxlength="10" placeholder="请输入用户名" />
			</view>
		</view>
		<view class="bottom-list">
			<view class="items" v-for="(item, index) in listData" :key="index">
				<view  @click="$navTo.togo('/pages/glob/user/index?userId='+[indexs == 'follow' ? item.to_user_id :item.user_id ])" class="user-img">
					<image :src="item[indexs == 'follow' ? 'user_info_to' : 'user_info'].upload_avatar?item[indexs == 'follow' ? 'user_info_to' : 'user_info'].upload_avatar.path_text : '/static/home/default_user.png'" mode="aspectFill"></image>
				</view>
				<view class="name-info">
					<view class="info">
						<text class="color-DFB fs32">{{ item[indexs == 'follow' ? 'user_info_to' : 'user_info'].nickname }}</text>
						<text v-if="item[indexs == 'follow' ? 'user_info_to' : 'user_info'].intro">{{ item[indexs == 'follow' ? 'user_info_to' : 'user_info'].intro }}</text>
					</view>
					<view
						v-if="indexs == 'follow' ? item.user_info_to.user_fans_user_id : item.user_info.user_fans_to_user_id"
						@click="handleCloseFollow(item,index,true)"
						class="star no"
						>
						互相关注
					</view>
					<view v-else>
						<view class="star" v-if="indexs != 'follow' || item.showClick" @click="handleFollow(item,index,false)">关注</view>
						<view class="star no" v-if="indexs == 'follow' && !item.showClick" @click="handleCloseFollow(item,index,true,true)">已关注</view>
					</view>
					
				</view>
			</view>
			<view class="flex-jc-ac no-user" v-if="listData.length > 10">没有更多用户了哟~</view>
		</view>
	</view>
</template>

<script>
import { apiGetFansIndexFollow, apiGetFansIndex, apiPostFansCreate, apiPostFansCancel } from '@/api/me.js';
export default {
	components: {},
	data() {
		return {
			indexs: '',
			value: '',
			listData: [],
			tempList: [],
			fansPage: 1,
			followPage: 1,
			time: null,
			info:{},
			initData:{},
			pageSize:30
		};
	},
	onLoad(data) {
		this.init(data)
	},
	watch: {
		indexs(val) {
			this.value = '';
			this.fansPage = 1;
			this.followPage = 1;
			this.listData = [];
			this.tempList = [];
			this.getData(val);
		}
	},
	methods: {
		init(data){
			
				this.initData = data
				this.info = uni.getStorageSync('userinfo');
				uni.setNavigationBarTitle({
					title: this.info.user_info.nickname
				});
				this.indexs = data.data;
				
			
			
		},
		getData(type,bool) {
			return new Promise((resfn,rejfn)=>{
			if (type == 'fans') {
				let putData = {
					nickname: this.value,
					page: this.fansPage,
					page_size: this.pageSize
				};
				if (!putData.nickname) delete putData.nickname;
				apiGetFansIndex(putData).then(res => {
					console.log(this.listData,8888,res)
					if(bool){
						this.listData = []
					}
					resfn()
					this.tempList = res.data.data;
					this.listData = this.listData.concat(res.data.data);
					this.info.user_info.fans_count_text = res.data.total
					
				});
			} else {
				let data = {
					nickname: this.value,
					page: this.followPage,
					page_size: this.pageSize
				};
				if (!data.nickname) delete data.nickname;
				apiGetFansIndexFollow(data).then(res => {
					if(bool){
						this.listData = []
					}
					resfn()
					this.tempList = res.data.data;
					this.listData = this.listData.concat(res.data.data);
					this.info.user_info.follow_count_text = res.data.total
				});
			}
			
			})
		},
		handleInputChange(e) {
			this.listData = [];
			if (this.time) {
				clearTimeout(this.time);
				this.time = null;
			}
			this.time = setTimeout(() => {
				this.getData(this.indexs);
			}, 300);
		},
		handleCloseFollow(item,index,bool,old) {
			
			if (this.indexs == 'fans') {
				// user_id
				apiPostFansCancel({ to_user_id: item.user_id })
					.catch(() => {
						uni.showToast({
							title: '操作失败',
							icon: 'none'
						});
					})
					.then(() => {
						this.listData[index].user_info.user_fans_to_user_id = false;
						this.info.user_info.follow_count_text--
						this.$store.dispatch('home/changeFocusStatus',false)
						if(bool){
							this.$set(this.listData[index],"showClick",bool)
							
						}
					});
			} else {
				// to_user_id
				apiPostFansCancel({ to_user_id: item.to_user_id })
					.catch(() => {
						uni.showToast({
							title: '操作失败',
							icon: 'none'
						});
					})
					.then(() => {
						this.listData[index].user_info_to.user_fans_user_id = false;
						this.info.user_info.follow_count_text--
						this.$store.dispatch('home/changeFocusStatus',false)
						if(bool){
							this.$set(this.listData[index],"showClick",bool)
						}
						if(old){
							this.$set(this.listData[index],"guanzhu",true)
						}
					});
			}
		},
		handleFollow(item,index) {
			if (this.indexs == 'fans') {
				// user_id
				apiPostFansCreate({ to_user_id: item.user_id })
					.catch(() => {
						uni.showToast({
							title: '操作失败',
							icon: 'none'
						});
					})
					.then(() => {
						this.info.user_info.follow_count_text++
						this.listData[index].user_info.user_fans_to_user_id = true
						this.$store.dispatch('home/changeFocusStatus',true)
					});
			} else {
				// to_user_id
				apiPostFansCreate({ to_user_id: item.to_user_id })
					.catch(() => {
						uni.showToast({
							title: '操作失败',
							icon: 'none'
						});
					})
					.then(() => {
						this.info.user_info.follow_count_text++
						this.listData[index].user_info_to.user_fans_user_id = true;
						if(item.guanzhu) {
							this.listData[index].user_info_to.user_fans_user_id = false;
							this.$set(this.listData[index],"showClick",false)
							this.$store.dispatch('home/changeFocusStatus',true)
						}
					});
			}
		}
	},
	onReachBottom() {
		if (this.tempList.length < this.pageSize) {
			return;
		}
		if (this.indexs == 'fans') {
			this.fansPage++;
		} else {
			this.followPage++;
		}
		this.getData(this.indexs);
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.getData(this.indexs,true).then(res=>{
			uni.stopPullDownRefresh();  //停止下拉刷新动画
		})
	
	}
};
</script>

<style scoped lang="scss">
.my-index-view {
	padding: 0 28upx;
}
.mt10 {
	margin-top: 10upx;
}
.ml120 {
	margin-left: 120upx;
}
.fenlei {
	margin-bottom: 100upx;
	text {
		border-bottom: 2px solid transparent;
	}
}

.listbox {
	font-weight: 400;
	color: rgba(116, 115, 132, 1);
	font-size: 32upx;
}

text.redbottom {
	font-weight: 600;
	color: rgba(221, 219, 251, 1);
	font-size: 16 * 2upx;
	position: relative;

	&::after {
		content: '';
		background: url(~@/static/icon/active.png);
		display: inline-block;
		position: absolute;
		bottom: -30upx;
		background-size: 100%;
		transform: translateX(-50%);
		left: 50%;
		width: 32upx;
		height: 10upx;
	}
}
.text {
	font-size: 28upx;
	color: #434254;
	font-weight: 400;
	margin-left: 10upx;
}
.star {
	color: #fff;
	width: 140upx;
	height: 60upx;
	text-align: center;
	line-height: 60upx;
	border-radius: 8upx;
	background: linear-gradient(22deg, #883b8b 0%, #f01332 100%);
	&.no {
		background: #434254;
	}
}
.info {
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	font-size: 28upx;
	width: 180 * 2upx;
	justify-content: space-between;
}
.name-info {
	display: flex;
	justify-content: space-between;
	width: 280 * 2upx;
	align-items: center;
}
.user-img {
	width: 100upx;
	height: 100upx;
	overflow: hidden;
	border-radius: 50%;
	margin-right: 32upx;
}
.items {
	display: flex;
	margin-top: 60upx;
}
.inputs {
	background: #1c1b2b;
	padding: 24upx;
	padding-left: 100upx;
	position: relative;
	border-radius: 8upx;
	.icons {
		background: url(../../static/icon/search.png) no-repeat;
		background-size: 54upx 54upx;
		width: 66upx;
		height: 66upx;
		position: absolute;
		left: 24upx;
		top: 24upx;
	}
}
.no-user {
	padding: 80upx;
}
.top-search {
	position: fixed;
	padding: 20upx 28upx;
	background-color: #0c0b18;
	z-index: 10;
	top: 0;
	left: 0;
	right: 0;
}
.bottom-list {
	margin-top: 320upx;
}
</style>
